<template>
  <div>
    <t-dialog
      header="选择产品"
      :visible.sync="visible"
      @confirm="onConfirm"
      width="70%"
      :confirmOnEnter="true"
      :onClose="close"
    >
      <div class="filter">
        <t-space size="12px" class="flex-5">
          <!--<t-date-picker style="width: 140px;" v-model="params.date" :prefix-icon="renderPrefixIcon" enable-time-picker allow-input clearable  format="YYYY-MM-DD HH:mm:ss">-->
          <!--  <template #suffixIcon>-->
          <!--    <icon-font name="chevron-down"/>-->
          <!--  </template>-->
          <!--</t-date-picker>-->
          <!--<t-select style="width: 140px;" v-model="params.classify_id" :options="classifyOptions" placeholder="按产品分类" @change="getData">-->
          <!--  <template #label>-->
          <!--    <icon-font name="layers" style="color: #000;"/>-->
          <!--  </template>-->
          <!--</t-select>-->
          <t-cascader v-model="params.classify_id" :options="classifyOptions" @change="getData" placeholder="请选择产品分类"></t-cascader>
          <!--<t-select style="width: 140px;" v-model="params.brand_id" :options="brandOptions" placeholder="按产品品牌">-->
          <!--  <template #label>-->
          <!--    <icon-font name="layers" style="color: #000;"/>-->
          <!--  </template>-->
          <!--</t-select>-->
          <!--<t-select style="width: 140px;" v-model="params.hot_level" :options="levelOptions" placeholder="按产品等级">-->
          <!--  <template #label>-->
          <!--    <icon-font name="layers" style="color: #000;"/>-->
          <!--  </template>-->
          <!--</t-select>-->
          <t-input style="width: 220px;" v-model="params.key" placeholder="输入产品名称、关键字、ID">
            <template #label>
              <icon-font name="search" size="16px" style="color:#000;font-weight: bold"/>
            </template>
          </t-input>
        </t-space>

        <!--<div class="flex-4 flex align-center justify-end">-->
        <!--  <t-button theme="default" class="import-btn">导入</t-button>-->
        <!--</div>-->
      </div>

      <div class="pt16">
        <t-table
          rowKey="id"
          :data="lists"
          :columns="columns"
          :stripe="stripe"
          :bordered="bordered"
          :hover="hover"
          :size="size"
          :max-height="472"
          :table-layout="tableLayout ? 'auto' : 'fixed'"
          :showHeader="showHeader"
          cellEmptyContent="-"
          resizable
          :loading="loading"
          @page-change="pageChange"
          :pagination="pagination"
          :selected-row-keys="selectedRowKeys"
          @select-change="handleSelectChange"
        >
          <template #thumb="{row}">
            <t-image-viewer v-if="row.thumb" :images="[row.thumb]" :closeOnEscKeydown="false">
              <template #trigger="{ open }">
                <div class="tdesign-demo-image-viewer__ui-image" @click="open">
                  <p class="prod-img">
                    <img alt="test" :src="row.thumb"/>
                  </p>
                  <div class="tdesign-demo-image-viewer__ui-image--hover">
                    <span><browse-icon size="1.4em"/> </span>
                  </div>
                </div>
              </template>
            </t-image-viewer>
            <p v-else class="no-img"></p>
          </template>
          <template #day_rent="{row}">
            <p class="">￥{{ row.day_rent ? row.day_rent : '0.00' }}</p>
          </template>
          <template #selling_price="{row}">
            <p class="">￥{{ row.selling_price ? row.selling_price : '0.00' }}</p>
          </template>
          <!--<template #selling_price="{row}">-->
          <!--  <p class="">￥{{ row.selling_price ? row.selling_price : '0.00' }}</p>-->
          <!--</template>-->
          <!--<template #cash_pledge="{row}">-->
          <!--  <p class="">￥{{ row.cash_pledge ? row.cash_pledge : '0.00' }}</p>-->
          <!--</template>-->
          <template #stock_num="{row}">
            <p class="">{{ row.stock_num ? row.stock_num : '0' }}</p>
          </template>
          <template #status="{row}">
            <!-- -1 作废；0 下架；1 上架-->
            <t-tag v-if="row.status === 1" shape="round" variant="light" theme="success">上架</t-tag>
            <t-tag v-if="row.status === 0" shape="round" variant="light" theme="warning">下架</t-tag>
            <t-tag v-if="row.status === -1" shape="round" variant="light" theme="default">作废</t-tag>
            <!--<t-tag v-if="row.status === 'soldOut'" shape="round" variant="light" theme="danger">已售罄</t-tag>-->
          </template>
        </t-table>
      </div>
    </t-dialog>
  </div>
</template>

<script lang="jsx">
import {IconFont, CalendarIcon, BrowseIcon} from "tdesign-icons-vue";
import {productListApi} from "@/api/product";
import {classifyListApi} from "@/api/classify";

export default {
  name: 'ProductList',
  components: { IconFont, CalendarIcon, BrowseIcon },
  data() {
    return {
      visible: false,
      renderPrefixIcon: () => <CalendarIcon/>,
      params: {
        page: 1,  // 当前页
        limit: 10,  // 每页条数
        is_del: '', // 是否删除（1回收站；0正常）
        classify_id: '', // 分类
        brand_id: '', // 品牌
        hot_level: '',  // 推荐等级（5~1）
        key: '',  // 关键字
        status: '', // 状态
      },
      lists: [],
      size: 'medium',
      tableLayout: false,
      stripe: false,
      bordered: false,
      hover: true,
      showHeader: true,
      columns: [
        {colKey: 'row-select', type: 'multiple', width: 50,},
        {colKey: 'id', title: 'ID', width: 70},
        {colKey: 'thumb', title: '产品图', align: 'center', width: 140,},
        {colKey: 'title', title: '名称', width: 240, ellipsis: true},
        {colKey: 'classify_title', title: '分类', width: 140, ellipsis: true},
        {colKey: 'brand_title', title: '品牌', width: 140, ellipsis: true},
        {colKey: 'day_rent', title: '日租价', width: 120},
        {colKey: 'selling_price', title: '售卖价', width: 120},
        //{colKey: 'cash_pledge', title: '租赁押金', width: 140},
        {colKey: 'stock_num', title: '库存', width: 90},
        {colKey: 'status', title: '状态', width: 90},
        //{colKey: 'sort', title: '排序', width: 100},
      ],
      selectedRowKeys: [],
      selectedRowData: [],
      pagination: {
        defaultCurrent: 1,
        defaultPageSize: 5,
      },
      loading: true,

      classifyOptions: [],
      brandOptions: [],
      levelOptions: [
        {label: '5级', value: 5},
        {label: '4级', value: 4},
        {label: '3级', value: 3},
        {label: '2级', value: 2},
        {label: '1级', value: 1},
      ],
    }
  },
  methods: {
    onConfirm() {
      this.$emit('confirm', this.selectedRowData)
      this.close()
    },
    // 获取列表
    getOptions() {
      const params = {
        page: 1,  // 当前页
        limit: 9999,  // 每页条数
        // 模块类型（如产品分类 product_classify，说明 product_brand，发货说明 product_deliver，保障说明 product_safeguard ...）
      }
      classifyListApi({...params, belong_module: 'product_classify'}).then(res => {
        //this.classifyOptions = res.data.map(item => ({label: item.title,value: item.id}))
        let lists = res.data.map(item=> {
          return {
            label: item.title,
            value: item.id,
            id: item.id,
            pid: item.pid,
          }
        })
        const hierarchy = this.buildHierarchyRecursive(lists)
        this.classifyOptions = hierarchy
      })
      //classifyListApi({...params, belong_module: 'product_brand'}).then(res => {
      //  this.brandOptions = res.data.map(item => ({label: item.title,value: item.id}))
      //})
    },
    buildHierarchyRecursive(data, pid = 0) {
      return data
        .filter(item => item.pid === pid)
        .map(item => ({
          ...item,
          children: this.buildHierarchyRecursive(data, item.id)
        }));
    },
    // 获取数据
    getData() {
      this.pagination.defaultCurrent = 1
      this.getList()
    },
    // 获取列表
    getList() {
      this.loading = true
      this.params.page = this.pagination.defaultCurrent
      productListApi(this.params).then(res=> {
        this.pagination.total = res.count
        this.lists = res.data
      }).catch(err=> {
      }).finally(()=> {
        this.loading = false
      })
    },
    // 切换状态
    changeTab(tab) {
      this.params.user = tab.value
    },
    // 切换分页
    pageChange(pageInfo) {
      const { current, defaultCurrent, defaultPageSize, } = pageInfo
      this.pagination.defaultCurrent = current
      this.getList()
    },
    handleSelectChange(value, { selectedRowData }) {
      this.selectedRowKeys = value;
      this.selectedRowData = selectedRowData;
    },
    open() {
      this.params = {
        page: 1,  // 当前页
        limit: 10,  // 每页条数
        is_del: '', // 是否删除（1回收站；0正常）
        classify_id: '', // 分类
        brand_id: '', // 品牌
        hot_level: '',  // 推荐等级（5~1）
        key: '',  // 关键字
        status: '', // 状态
      }
      this.lists = []
      this.selectedRowKeys = []
      this.selectedRowData = []
      this.visible = true
      this.getData()
      this.getOptions()
    },
    close() {
      this.visible = false
    }
  }
}
</script>

<style lang="less" scoped>

/deep/ .content-card {

  .t-card__header {
    padding: var(--td-comp-paddingTB-xl) var(--td-comp-paddingLR-xl);
    padding-bottom: 16px;
  }

  .t-card__body {
    padding: var(--td-comp-paddingTB-s) var(--td-comp-paddingLR-xl) var(--td-comp-paddingTB-m);
  }

  .setting-btn {
    font-size: 14px;
    font-weight: 400;
    line-height: 19.6px;
    text-align: left;
    color: #005687;
  }

  .invite-btn {
    font-size: 12px;
    font-weight: 400;
    line-height: 16.8px;
    text-align: left;
    color: #005687;

    background-color: #F3FBFF;
    border: 1px solid #005687;
    border-radius: var(--td-radius-default);
  }
}

</style>
